<template>
	<view class="container">
		<!-- 申请列表 -->
		<u-navbar :is-back="true" :border-bottom="flase" :title="navbarTitle" title-color="#fff" :title-size="40"
			backIconColor="#fff">
			<view slot="applyForList" class="applyForListStyle">
				<view class="screening" @click="screenShow = true">
					<u-icon name="plus-circle" color="#2979ff" size="28" style="margin-right: 8rpx;"></u-icon>筛选
				</view>
				<view class="searchView">
					<view class="search">
						<u-input v-model="keyWord" :clearable="true" placeholder="输入用户姓名"
							placeholder-style="paddingLeft:0" :custom-style="uInput1" :trim="true" />
						<view>
							<u-icon name="search" color="#fff" size="35"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<template v-if="dataList.length==0">
				<view class="empty">
					<u-empty text="列表为空" mode="list" v-show="show"></u-empty>
				</view>
			</template>
			<template v-else>
				<view class="content_box" :class="app_id==4||app_id==5||app_id==13?'content_box2':''"
					v-for="(item,index) in dataList" :key="index" @click="bussiness(item)">
					<view class="box" @longpress="longPressDelete(item)">
						<view class="lable" :class="[item.stu_name== '待审核' ? 'color3': '', item.stu_name=='通过'? 'color2': ''
							,item.stu_name=='驳回'? 'color1': '',item.stu_name== '审核中' ? 'color4': '',item.stu_name== '已完成' ? 'color2': '']">
							{{item.stu_name}}
						</view>
						<view class="title">
							{{item.title}}
						</view>
						<view class="time">
							申请人：{{item.user.real_name}}
						</view>
						<view class="time" v-if="item.money">
							<view v-if="app_id==4||app_id==5||app_id==13">
								金额：{{item.money}}
							</view>
						</view>
						<view class="time">
							申请时间：{{item.created_at}}
						</view>
					</view>
				</view>
			</template>
		</view>
		<view style="line-height: 60rpx;text-align: center;color: #c8c9cc;padding-bottom: 200rpx;padding-left: 20rpx;">
			{{loadMorePrompt}}
		</view>
		<view class="pos">
			<button @click="bussinessXq()" class="submit">
				<u-icon name="plus" color="#2979ff" size="38" style="margin-right: 5px;"></u-icon>
				发起申请
			</button>
		</view>
		<!-- 顶部筛选(通过，驳回，待审批等) -->
		<u-select v-model="screenShow" :list="screenList" @confirm="screenConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索框
				keyWord: "",
				uInput1: { //输入框的样式
					width: "80%",
					padding: "0 25rpx",
				},
				screenShow: false,
				screenList: [ //状态筛选列表
					{
						value: '',
						label: '未选择'
					}, {
						value: '0',
						label: '待审批'
					}, {
						value: '-1',
						label: '已驳回'
					}, {
						value: '2',
						label: '审批中'
					}, {
						value: '3',
						label: '已完成'
					}
				],
				screenListStatus: "", //筛选后获得的状态

				dataList: [],
				app_id: "",
				show: true,
				page: 1, //当前页数
				allPage: 0, //总页数
				loadMorePrompt: '上拉加载更多...',
				navbarTitle: '' //u-navbar标题
			}
		},
		onLoad(e) {
			this.app_id = e.id
			this.navbarTitle = e.title
		},
		onShow() {
			this.dataList = []
			setTimeout(() => {
				this.getListData()
			}, 200)
		},
		methods: {
			longPressDelete(item) { //长按事件
				// console.log(item, '长按删除');
				if (item.status == 0) { //未审批
					uni.showModal({
						content: "是否撤销该申请！",
						success(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					})
				} else { //已审批
					uni.showModal({
						content: "删除该申请？",
						success(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					})
				}
			},
			bussinessXq() { //跳转至申请页
				uni.navigateTo({
					url: `../application/bussinessXq?id=${this.app_id}&title=${this.navbarTitle}`
				})
			},
			bussiness(item) { //跳转详情页
				// console.log(item);
				uni.navigateTo({
					url: `../application/bussiness?id=${item.applyLog[0].apply_id}&appid=${this.app_id}`
				})
			},
			getListData() { //接口
				uni.showLoading({
					title: '正在加载...'
				})
				this.loadMorePrompt = '加载中...'
				this.$http(this.$api.partitionBusiness, { //  --  /apply/list
					app_id: this.app_id,
					page: this.page,
					title: this.keyWord,
					status: this.screenListStatus,
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "刷新成功",
						icon: 'none',
						duration: 800
					})
					// this.allPage = Math.ceil(res.data.total / res.data.list.length)
					this.allPage = Math.ceil(res.data.total / 5) //一页显示五条
					this.dataList = [...this.dataList, ...res.data.list]
					uni.stopPullDownRefresh()
					this.loadMorePrompt = '上拉加载更多...'
					if (res.data.list.length <= res.data.total) {
						this.loadMorePrompt = '没有更多申请了 ~~~'
					}
				})
			},
			screenConfirm(e) { //状态筛选 - 选择后
				this.screenListStatus = e[0].value
				this.dataList = []
				setTimeout(() => {
					this.getListData()
				}, 300)
			},
		},
		watch: {
			keyWord() { //监视搜索框的值
				this.dataList = []
				this.getListData()
				// setTimeout(() => {
				// 	this.getListData()
				// }, 300)
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.screenListStatus = []
			this.dataList = []
			this.page = 1
			this.getListData()
		},
		onReachBottom() { //上拉加载更多
			if (this.page == this.allPage) {
				return
			} else {
				this.page++;
				this.getListData()
			}
		},
	}
</script>

<style scoped>
	.applyForListStyle {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 0 10rpx #c8c9cc;
		padding: 0 25rpx;
	}

	/* 搜索框 */
	.searchView {
		width: 83%;
		padding: 15rpx 0;
	}

	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #dfe2e55e;
		border-radius: 15px;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden;
	}

	u-input {
		width: 78%;
	}

	.search>view {
		width: 20%;
		text-align: center;
		background: linear-gradient(to right, #9C6CEE, #78AAE8);
	}

	* {
		padding: 0;
		margin: 0;
	}

	.empty {
		margin-top: 200rpx;
	}

	.lable {
		width: 310rpx;
		height: 80rpx;
		color: #fff;
		transform: rotate(-42deg);
		position: absolute;
		top: 249rpx;
		left: 455rpx;
		z-index: -99;
		text-align: center;
		line-height: 70rpx !important;
	}

	.content {
		padding: 0px 15px;
		font-size: 14px;
		padding-bottom: 45rpx;
		margin-top: 120rpx;
	}

	.content_box {
		box-shadow: 0px 0px 6px #DCDCDC;
		border-radius: 10px;
		padding: 15px;
		line-height: 95rpx;
		overflow: hidden;
		width: 99%;
		margin: 20px auto;
		position: relative;
	}

	.content_box2 {
		line-height: 70rpx !important;
	}

	.box {
		height: 280rpx;
	}

	.box2 {
		line-height: initial;
		line-height: 95rpx;
	}


	.lab {
		display: flex;
	}

	.u-tag {
		margin-right: 10px;
	}

	.time {
		font-size: 13px;
		color: #666;
	}

	.submit {
		width: 180px;
		border-radius: 40px;
		border: 1px solid #80b0ff;
		color: #2979ff;
		background-color: rgba(153, 204, 255, 0.1);
		font-size: 17px;
	}

	.color1 {
		color: #fff;
		background-color: red;
	}

	.color2 {
		color: #fff;
		background-color: limegreen;
	}

	.color3 {
		color: #fff;
		background-color: skyblue;
	}

	.color4 {
		color: #fff;
		background-color: orange;
	}

	.pos {
		position: fixed;
		bottom: 75rpx;
		left: 195rpx;
		background-color: #fff;
		border-radius: 40px;
	}

	.title {
		font-size: 18px;
	}
</style>
